<script setup>
import { ref, onUpdated } from 'vue';

const emits = defineEmits(['updata']);
const props = defineProps(['field', 'index', 'setName']);
const inputVal = ref('')

onUpdated(() => {
    emits('updata', inputVal.value, props.field, props.index)
})

</script>
<template>
    <div class="input-box">
        <div class="modify-name">
            {{ $t("me.modify") }} {{ props.setName }}
            <slot></slot>
        </div>
        <input type="text" v-model="inputVal" :placeholder="$t('me.profile.setEM')">
    </div>
</template>
<style lang="scss" scoped>
.input-box {
    position: absolute;
    bottom: 0;
    z-index: 99;
    width: 100vw;
    height: 100rem;
    background-color: rgb(255, 255, 255);

    .modify-name {
        position: relative;
        margin: 10rem auto;
        text-align: center;
        font-size: 18rem;
        font-weight: 500;

    }

    input {
        display: block;
        margin: 0 auto;
        width: 80vw;
        height: 40rem;
        outline: none;
        border: 0;
        font-size: 16rem;
        border-bottom: 1rem solid #e5e5ee;
        padding-left: 16rem;
        box-sizing: border-box;
    }
}
</style>